AngularJS Directives
AngularJS আপনাকে নির্দেশাবলী নামে নতুন বৈশিষ্ট্য সহ HTML প্রসারিত করতে দেয়।
AngularJS-এর একটি অন্তর্নির্মিত নির্দেশাবলী রয়েছে যা আপনার অ্যাপ্লিকেশনগুলিতে কার্যকারিতা প্রদান করে।
AngularJS আপনাকে আপনার নিজস্ব নির্দেশাবলী সংজ্ঞায়িত করতে দেয়।
AngularJS নির্দেশাবলীর মৌলিক বিষয়
AngularJS নির্দেশাবলী হল ng- উপসর্গ সহ বর্ধিত HTML বৈশিষ্ট্য।
ng-app
একটি AngularJS অ্যাপ্লিকেশন শুরু করে
ng-init
অ্যাপ্লিকেশন ডেটা শুরু করে
ng-model
অ্যাপ্লিকেশান ডেটাতে HTML নিয়ন্ত্রণের মান আবদ্ধ করে
আমাদের AngularJS নির্দেশিকা রেফারেন্সে সমস্ত AngularJS নির্দেশাবলী সম্পর্কে পড়ুন।
উদাহরণ
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>ng-অ্যাপ নির্দেশিকা AngularJS কে বলে যে <div> উপাদানটি AngularJS অ্যাপ্লিকেশনের "মালিক"।
ডেটা সংযোগ
উপরের উদাহরণে {{ firstName }} এক্সপ্রেশন হল একটি AngularJS ডেটা বাইন্ডিং এক্সপ্রেশন।
AngularJS-এ ডেটা বাইন্ডিং AngularJS এক্সপ্রেশনকে AngularJS ডেটাতে আবদ্ধ করে।
{{ firstName }} ng-model="firstName" এর সাথে আবদ্ধ।
দুটি পাঠ্য ক্ষেত্র সংযুক্ত করার উদাহরণ:
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>দ্রষ্টব্য:
ng-init ব্যবহার করা খুব সাধারণ নয়। কন্ট্রোলারের অধ্যায়ে আপনি কীভাবে ডেটা শুরু করবেন তা শিখবেন।
HTML উপাদান পুনরাবৃত্তি
ng-রিপিট নির্দেশিকা একটি HTML উপাদানের পুনরাবৃত্তি করে:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>ng-রিপিট নির্দেশিকা একটি সেটের প্রতিটি আইটেমের জন্য আক্ষরিকভাবে HTML উপাদান কপি করে।
এনজি-রিপিট নির্দেশিকাটি অবজেক্টের অ্যারেতে ব্যবহৃত হয়:
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>ডাটাবেস অ্যাপ্লিকেশন:
AngularJS ডাটাবেস CRUD (Read Update Delete তৈরি করুন) অ্যাপ্লিকেশনের জন্য দুর্দান্ত। কল্পনা করুন যদি এই বস্তুগুলি একটি ডাটাবেস থেকে রেকর্ড করা হয়।
ng-app Directive
ng-অ্যাপ নির্দেশিকা একটি AngularJS অ্যাপ্লিকেশনের মূল উপাদানকে সংজ্ঞায়িত করে।
যখন একটি ওয়েব পৃষ্ঠা লোড করা হয়, তখন এনজি-অ্যাপ নির্দেশিকা স্বয়ংক্রিয়ভাবে অ্যাপ্লিকেশনটি চালু করে (অটোলঞ্চ)।
ng-init Directive
ng-init নির্দেশিকা একটি AngularJS অ্যাপ্লিকেশনের জন্য প্রাথমিক মানগুলি সংজ্ঞায়িত করে।
সাধারণত, আপনি ng-init ব্যবহার করবেন না।
পরিবর্তে আপনি একটি নিয়ামক বা ব্লক ব্যবহার করবেন।
আপনি পরে কন্ট্রোলার এবং মডিউল সম্পর্কে আরও শিখবেন।
ng-model Directive
এনজি-মডেল নির্দেশিকা এইচটিএমএল কন্ট্রোলের মান (ইনপুট, সিলেক্ট, টেক্সটেরিয়া) অ্যাপ্লিকেশন ডেটার সাথে আবদ্ধ করে।
এনজি-মডেল নির্দেশিকা এছাড়াও করতে পারে:
- অ্যাপ্লিকেশন ডেটার জন্য প্রকার যাচাইকরণ প্রদান করুন (নম্বর, ইমেল, প্রয়োজনীয়)
- অ্যাপ্লিকেশন ডেটার জন্য স্থিতি প্রদান করুন (অবৈধ, নোংরা, স্পর্শ করা, ত্রুটি)
- HTML উপাদানের জন্য CSS ক্লাস প্রদান করা
- এইচটিএমএল ফর্মের সাথে এইচটিএমএল উপাদান সংযুক্ত করা
পরবর্তী:
পরবর্তী অধ্যায়ে ng-মডেল নির্দেশিকা সম্পর্কে আরও পড়ুন।
নতুন নির্দেশনা তৈরি করা
সমস্ত অন্তর্নির্মিত AngularJS নির্দেশাবলী ছাড়াও, আপনি আপনার নিজস্ব নির্দেশাবলী তৈরি করতে পারেন।
.directive ফাংশন ব্যবহার করে নতুন নির্দেশনা তৈরি করা হয়।
একটি নতুন নির্দেশিকা কল করতে, নতুন নির্দেশের মতো একই ট্যাগ নামের একটি HTML উপাদান তৈরি করুন৷
একটি নির্দেশিকা নামকরণ করার সময়, আপনাকে অবশ্যই একটি cameCase নাম, jassifTestDirective ব্যবহার করতে হবে, কিন্তু এটিকে কল করার সময়, আপনাকে অবশ্যই - পৃথক করা নাম, jassif-test-directive ব্যবহার করতে হবে:
<body ng-app="myApp">
<jassif-test-directive></jassif-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("jassifTestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>নির্দেশমূলক কল পদ্ধতি
আপনি একটি নির্দেশিকা ব্যবহার করে কল করতে পারেন:
উপাদানের নাম
<jassif-test-directive>
</jassif-test-directive>বৈশিষ্ট্য
<div jassif-test-directive>
</div>ক্লাস
<div class="jassif-test-directive">
</div>মন্তব্য করুন
<!-- directive: jassif-test-directive -->উপরের সমস্ত উদাহরণ একই ফলাফল দেবে।
বিধিনিষেধ
আপনি শুধুমাত্র নির্দিষ্ট পদ্ধতির মাধ্যমে আপনার নির্দেশাবলীকে সীমাবদ্ধ করতে পারেন।
উদাহরণ
"A" মানের সাথে একটি সীমাবদ্ধ বৈশিষ্ট্য যুক্ত করে, নির্দেশটি শুধুমাত্র গুণাবলী দ্বারা বলা যেতে পারে:
var app = angular.module("myApp", []);
app.directive("jassifTestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});| মান | অর্থ | ব্যাখ্যা |
|---|---|---|
| E | উপাদানের নাম | Element name |
| A | বৈশিষ্ট্য | Attribute |
| C | ক্লাস | Class |
| M | মন্তব্য করুন | Comment |
ডিফল্টরূপে মান হল EA, যার অর্থ হল উভয় উপাদানের নাম এবং বৈশিষ্ট্যের নাম নির্দেশিকাকে কল করতে পারে।